<template>
  <div>
    <Card>
      <p slot="title" class="card-title">
        <Icon type="home"></Icon>
        <span>节点管理</span>
      </p>
      <div>
        <Row>
          <Col span="15" class="margin-bottom-10">
            <Button type="info" @click="openAddModal(null)">
              <Icon type="md-add"></Icon>&nbsp;添加节点
            </Button>
            <Button type="success" @click="getData">
              <Icon type="md-refresh"></Icon>&nbsp;刷新数据
            </Button>
          </Col>
        </Row>
        <div class="tables">
          <Table border :columns="columns" :data="datas">
            <template slot-scope="{ row }" slot="type">
              <strong>{{ row.type===0?'线上':'备用' }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button type="primary" @click="openAddModal(row)" size="small">编辑</Button>
              <Button type="error" @click="remove(row.id)" size="small">删除</Button>
            </template>
          </Table>
        </div>
        <Page :total="dataCount" :page-size="pageSize" show-total show-sizer class="paging" @on-change="changepage"
              @on-page-size-change="changepagesize"></Page>
      </div>
    </Card>
    <Modal v-model="modal.show" :title="modal.type==1 ? '添加节点':'更新节点'"
           @on-ok="modalOk"
           :mask-closable="false">
      <Alert show-icon>名称就是备注</Alert>
      <Form :model="modal.data" :label-width="80">
        <FormItem v-if="modal.type==2" label="ID">
          <Input disabled :value="modal.data.id"></Input>
        </FormItem>

        <FormItem label="名称/描述">
          <Input v-model.trim="modal.data.desc"></Input>
        </FormItem>
        <FormItem label="类型">
          <Select v-model.trim="modal.data.type" style="width:100%">
            <Option v-for="item in [{label:'线上',value:0},{label:'备用',value:1}]"
                    :value="item.value" :key="item.value">{{ item.label }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="节点IP">
          <Input v-model.trim="modal.data.ip"></Input>
        </FormItem>
        <FormItem label="节点端口">
          <Input v-model.trim="modal.data.port"></Input>
        </FormItem>
        <FormItem label="权重值">
          <Input v-model.trim="modal.data.weight"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
    import {addNode, listNode, updateNode, removeNode} from '@/api/serverNode'

    export default {
        data() {
            return {
                dataCount: 0,
                // 每页显示多少条
                pageSize: 10,
                page: 1,
                columns: [
                    {
                        title: '节点ID',
                        key: 'id',
                    },
                    {
                        title: '节点类型',
                        key: 'type',
                        slot: 'type',
                    },
                    {
                        title: '节点ip',
                        key: 'ip',
                    },
                    {
                        title: '节点端口',
                        key: 'port',
                    },
                    {
                        title: '节点(名字/描述)',
                        key: 'desc',
                    },  {
                        title: '权重',
                        key: 'weight',
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                datas: [],
                modal: {
                    show: false,
                    type: 1,
                    data: {
                        id: 0,
                        desc: '',
                        type: 0, // 0-上线 1-备用
                        port: '',
                        ip: '',
                        weight: 0,
                    }
                },
                removeObject: null
            }
        },
        created() {
            this.getData()
        },
        methods: {
            getData() {
                let _this = this;
                listNode("?page=" + this.page + "&pageSize=" + this.pageSize).then((data) => {
                    if (data.data.code === 200) {
                        _this.datas = data.data.data.list;
                        _this.dataCount = data.data.data.totalRow;
                    } else {
                        this.$Message.error(data.data.msg)
                    }
                });
            },
            openAddModal(row) {
                if (row === null) {
                    this.modal.type = 1;
                    this.modal.data = {
                        id: 0,
                        desc: '',
                        type: 0, // 0-上线 1-备用
                        port: '',
                        ip: '',
                    }
                } else {
                    this.modal.type = 2;
                    console.log(row)
                    this.modal.data = row;
                }
                console.log(this.modal.data)
                this.modal.show = true
            },
            modalOk() {
                if (this.modal.type === 1) {
                    this.add()
                } else {
                    this.update();
                }
            },
            add() {
                this.$Message.loading({
                    content: '资源添加中...',
                    duration: 0
                });
                try {
                    console.log(this.modal.data)
                    addNode(this.modal.data).then((data) => {
                        if (data.data.code === 200) {
                            this.$Message.success(data.data.msg)
                        } else {
                            this.$Message.error(data.data.msg)
                        }
                        this.$Message.destroy()
                        this.getData()
                    });

                } catch (error) {
                    console.log(error)
                }
            },
            update() {
                this.$Message.loading({
                    content: '资源更新中...',
                    duration: 0
                });
                try {
                    console.log(this.modal.data)
                    updateNode(this.modal.data).then((data) => {
                        if (data.data.code === 200) {
                            this.$Message.success(data.data.msg)
                        } else {
                            this.$Message.error(data.data.msg)
                        }
                        this.getData()
                        this.$Message.destroy()
                    });
                } catch (error) {
                    console.log(error)
                }
            },
            remove(id) {
                console.log(id)
                try {
                    removeNode("?id=" + id).then((data) => {
                        if (data.data.code === 200) {
                            this.$Message.success(data.data.msg)
                        } else {
                            this.$Message.error(data.data.msg)
                        }
                        this.getData()
                        this.$Message.destroy()
                    });
                } catch (error) {
                    console.log(error)
                }
            },
            changepage(page) {
                this.page = page;
                this.getData();
            },
            changepagesize(pageSize) {
                this.pageSize = pageSize;
            }
        }
    }
</script>
<style>
  .tables {
    margin: 10px 0;
  }
</style>
